<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet">
</head>

<body>
  <div id="app">
    <div class="center-block" style="width:600px;">
      <div class="row">
        <div class="col-md-4">
          <input type="text" v-model="item.name" placeholder="商品名称" class="form-control">
        </div>
        <div class="col-md-4">
          <input type="number" min="1" v-model="item.num" placeholder="购买数量" class="form-control">
        </div>
        <div class="col-md-4">
          <input type="number" min="0" v-model="item.price" placeholder="购买价格" class="form-control">
        </div>
        <div class="col-md-4">
          <button class="btn" @click="addItem">增加</button>
        </div>
      </div>
    </div>
    <table style="width:600px;" align="center" class="table  table-bordered table-hover table-condensed">
      <tr>
        <th>商品名称</th>
        <th>商品价格</th>
        <th>购买数量</th>
        <th>小计</th>
        <th>操作</th>
      </tr>
      <tr>
        <td colspan="5" v-if="!items.length" class="text-center">
          暂无商品
        </td>
      </tr>
      <tr v-for="(item,index) in items">
        <td>
          <input 
            v-model="item.isChecked" 
            @change="singleChange"
            type="checkbox">
          {{item.name}}
        </td>
        <td>￥{{item.price}}</td>
        <td>
          <button 
            @click="addNum(index)"
            class="btn btn-xs">+</button>
          <span>{{item.num}}</span>
          <button 
            @click="reduceNum(index)"
            class="btn btn-xs">-</button>
        </td>
        <td>￥{{ (item.price*item.num).toFixed(2) }}</td>
        <td>
          <button 
            @click="delItem(index)"
            class="btn btn-danger btn-xs">删除</button>
        </td>
      </tr>

      <tr>
        <td>
          全选：
          <input 
            v-model="isAllChecked" 
            @change="allChecked"
            type="checkbox">
        </td>
        <td colspan="4">
          总价格：{{ total }}
        </td>
      </tr>
    </table>
  </div>
  <script src="./vue.js"></script>
  <script>
    const vm = new Vue({
      el: '#app',
      data:{
        item:{ // 新增商品
          name:"",
          price:0,
          num:1
        },
        isAllChecked: true,
        total:0,
        items:[
          {
            name:'商品1',
            price:10,
            num:2,
            isChecked:true
          },
          {
            name:'商品2',
            price:20,
            num:3,
            isChecked:true
          },
          {
            name:'商品3',
            price:15.999,
            num:9,
            isChecked:true
          },
          {
            name:'商品4',
            price:99.9,
            num:2,
            isChecked:true
          }
        ]
      },
      methods:{
        addItem(){
          // 增加商品
          /* this.item.isChecked = true
          this.items.unshift(this.item) */
         /*  this.items.unshift({
            ...this.item,
            isChecked:true
          }) */
          // Object.assign 合并对象
         /*  this.item.isChecked = true
          this.items.unshift(Object.assign({},this.item)) */
          this.item.isChecked = true
          this.items.unshift(JSON.parse(JSON.stringify(this.item)))
        },
        allChecked(){
          // 点击全选
          console.log(this.isAllChecked);
          this.items.forEach(item=>{ item.isChecked = this.isAllChecked })
        },
        singleChange(){
          // 切换单个 商品的状态
          // 影响全选
          const isAllChecked = this.items.every(item=>item.isChecked);
          this.isAllChecked = isAllChecked;
          this.calcTotal();

        },
        addNum(index){ // 增加数量
          this.items[index].num++
          this.calcTotal();
        },
        reduceNum(index){ //减少商品数量
          this.items[index].num--
          if(this.items[index].num <=1){
            this.items[index].num = 1
          }
          this.calcTotal();
        },
        calcTotal(){
          /* 
          所有选中商品 价格*数量的和
           */
          const checkItems = this.items.filter(item=> item.isChecked);
          this.total=0;
          checkItems.forEach(item=>{
            this.total += item.num*item.price
          })
          this.total = parseFloat(this.total.toFixed(2))
        },
        delItem(index){
          // 删除商品
          if(confirm("确认删除吗？")){
            this.items.splice(index,1);
            this.calcTotal();
          }
        }
      }
    })
    
    // 初始 计算总价格
    vm.calcTotal();
    // var obj2 = JSON.parse(JSON.stringify(obj))
    
    var obj = {
      a:10,
      b:20
    }
    var obj2 = {
      c:30,
      d:40
    }
    var obj3 = Object.assign(obj,obj2);
    console.log(obj3)
  </script>
</body>

</html>
